<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:21:38
 * @FilePath: \i-hos-app\shared\emr\src\components\insert\Symbol.vue
 * @Description: 特殊符号插入组件
-->
<template>
  <el-tabs class="symbol_tabs" v-model="symbolActiveName" @click="stopClick">
    <el-tab-pane v-for="obj in symbol" :label="obj.name" :name="obj.name" :key="obj.name">
      <div class="symbol">
        <span v-for="item in obj.list" :key="item" v-html="item" @click="checkAddItem(item)"></span>
      </div>
    </el-tab-pane>
  </el-tabs>
  <div ref="refInsertComponent" style="display: none">
    <span v-html="symbolActive"></span>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, Ref, nextTick } from 'vue'
  // 接口约束
  import { ISymbol } from '../../interface/page'
  // 组件插入hooks
  import { useInsertComponent } from '../../hooks/useInsertComponent'

  const refInsertComponent: Ref<HTMLElement | null> = ref(null) //  初始化要插入组件的节点
  let symbolActiveName = ref('最近使用') // 初始化选中的tabs
  let symbolActive: Ref<string> = ref('') // 初始化选择使用的符号
  // 符号数据
  let symbol: ISymbol[] = reactive([
    {
      name: '最近使用',
      list: !!window.localStorage.latest ? JSON.parse(window.localStorage.latest).reverse() : [],
    },
    {
      name: '医学符号',
      list: [
        'RP',
        'P.O',
        'INJ.',
        'MIXT.',
        'TAD.',
        'SOL.',
        'CO.',
        'PR.',
        'I.D',
        'I.V',
        'I.V.GTT.',
        'IH',
        'IM',
        'O.M',
        'O.N',
        'HS.',
        'AM.',
        'PM.',
        'A.C.',
        'P.C.',
        'SOS.',
        'ST.',
        'QD',
        'BID',
        'TID',
        'QOD',
        'QH',
        'Q2H',
        'Q3H',
        'MCG',
        'MG',
        'G',
        'ML',
        'sig',
        'qd',
        'bid',
        'tid',
        'qid',
        'qh',
        'q2h',
        'q4h',
        'q6h',
        'qn',
        'qod',
        'biw',
        'hs',
        'am',
        'pm',
        'St',
        'DC',
        'prn',
        'sos',
        'ac',
        'pc',
        '12n',
        '12mn',
        'gtt',
        'ID',
        'IH',
        'IM',
        'IV',
        'aa',
        'et',
        'Rp.',
        'sig./S.',
        'St./Stat.',
        'Cit.',
        's.o.s.',
        'p.r.n',
        'a.c.',
        'p.c.',
        'a.m.',
        'p.m.',
        'q.n.',
        'h.s.',
        'q.h.',
        'q.d.',
        'B.i.d.',
        'T.i.d.',
        'Q.i.d.',
        'q.4h.',
        'p.o.',
        'adus.int.',
        'adus.ext.',
        'H.',
        'im./M.',
        'iv./V.',
        'ivgtt.',
        'Inhal.',
        'O.D.',
        'O.L.',
        'O.S.',
        'O.U.',
        'No./N.',
        's.s',
        'ug.',
        'mg.',
        'g.',
        'kg.',
        'ml.',
        'L.',
        'q.s',
        'Ad.',
        'Aq.',
        'Aq.dest.',
        'Ft.',
        'Dil',
        'M.D.S.',
        'Co./Comp.',
        'Mist',
        'Pulv.',
        'Amp.',
        'Emul.',
        'Syr.',
        'Tr.',
        'Neb.',
        'Garg.',
        'rtt./gutt.',
        'collyr.',
        'Ocul.',
        'Liq.',
        'Sol.',
        'Lot.',
        'Linim.',
        'Crem.',
        'Ung.',
        'Past.',
        'Ol.',
        'Enem.',
        'Supp.',
        'Tab.',
        'Pil.',
        'Caps.',
        'Inj.',
        'po',
        'im',
        'iv',
        'ivgtt',
        'qd',
        'bid',
        'tid',
        'qid',
        'q8h',
        'qn',
        'Rp',
        'sig',
        'prn',
      ],
    },
    {
      name: '数学符号',
      list: [
        '⒈',
        '⒉',
        '⒊',
        '⒋',
        '⒌',
        '⒍',
        '⒎',
        '⒏',
        '⒐',
        '⒑',
        '⒒',
        '⒓',
        '⒔',
        '⒕',
        '⒖',
        '⒗',
        '⒘',
        '⒙',
        '⒚',
        '⒛',
        '⑴',
        '⑵',
        '⑶',
        '⑷',
        '⑸',
        '⑹',
        '⑺',
        '⑻',
        '⑼',
        '⑽',
        '⑾',
        '⑿',
        '⒀',
        '⒁',
        '⒂',
        '⒃',
        '⒄',
        '⒅',
        '⒆',
        '⒇',
        '①',
        '②',
        '③',
        '④',
        '⑤',
        '⑥',
        '⑦',
        '⑧',
        '⑨',
        '⑩',
        '㈠',
        '㈡',
        '㈢',
        '㈣',
        '㈤',
        '㈥',
        '㈦',
        '㈧',
        '㈨',
        '㈩',
        'ⅰ',
        'ⅱ',
        'ⅲ',
        'ⅳ',
        'ⅴ',
        'ⅵ',
        'ⅶ',
        'ⅷ',
        'ⅸ',
        'ⅹ',
        'Ⅰ',
        'Ⅱ',
        'Ⅲ',
        'Ⅳ',
        'Ⅴ',
        'Ⅵ',
        'Ⅶ',
        'Ⅷ',
        'Ⅸ',
        'Ⅹ',
        'Ⅺ',
        'Ⅻ',
        'g/L',
        'g/L',
        '×10<sup>9</sup>/L',
      ],
    },
    {
      name: '其他符号',
      list: [
        '、',
        '。',
        '·',
        'ˉ',
        'ˇ',
        '¨',
        '〃',
        '々',
        '—',
        '～',
        '‖',
        '…',
        '‘',
        '’',
        '“',
        '”',
        '〔',
        '〕',
        '〈',
        '〉',
        '《',
        '》',
        '「',
        '」',
        '『',
        '』',
        '〖',
        '〗',
        '【',
        '】',
        '±',
        '×',
        '÷',
        '∶',
        '∧',
        '∨',
        '∑',
        '∏',
        '∪',
        '∩',
        '∈',
        '∷',
        '√',
        '⊥',
        '∥',
        '∠',
        '⌒',
        '⊙',
        '∫',
        '∮',
        '≡',
        '≌',
        '≈',
        '∽',
        '∝',
        '≠',
        '≮',
        '≯',
        '≤',
        '≥',
        '∞',
        '∵',
        '∴',
        '♂',
        '♀',
        '°',
        '′',
        '″',
        '℃',
        '＄',
        '¤',
        '￠',
        '￡',
        '‰',
        '§',
        '№',
        '☆',
        '★',
        '○',
        '●',
        '◎',
        '◇',
        '◆',
        '□',
        '■',
        '△',
        '▲',
        '※',
        '→',
        '←',
        '↑',
        '↓',
        '〓',
        '〡',
        '〢',
        '〣',
        '〤',
        '〥',
        '〦',
        '〧',
        '〨',
        '〩',
        '㊣',
        '㎎',
        '㎏',
        '㎜',
        '㎝',
        '㎞',
        '㎡',
        '㏄',
        '㏎',
        '㏑',
        '㏒',
        '㏕',
        '︰',
      ],
    },
  ])
  // 阻止事件
  const stopClick = (event: any) => {
    if (event.target.nodeName != 'SPAN') {
      event.stopPropagation()
      event.preventDefault()
    }
  }
  // 选择符号并添加符号组件
  const checkAddItem = (flag: string): void => {
    symbolActive.value = flag

    // 获取最近使用的符号
    let latestSymb: string[] =
      window.localStorage.latest != undefined && !!window.localStorage.latest ? JSON.parse(window.localStorage.latest) : []

    // 去除相同的
    let newLatestSymb = Array.from(new Set(latestSymb))

    // 只保留最近使用的50个符号, 超过删除第一个
    if (latestSymb.length >= 50) newLatestSymb.shift()
    // 判断之前是否有使用过目前使用的符号，有则删除之前的，添加现在的在最后
    if (newLatestSymb.includes(flag)) {
      newLatestSymb.splice(newLatestSymb.indexOf(flag), 1)
    }
    // 向后添加新的符号
    newLatestSymb.push(flag)

    // 保存最新最近使用的符号
    window.localStorage.latest = JSON.stringify(newLatestSymb) as string

    // 渲染最近使用的符号
    let locSymb: string[] = JSON.parse(window.localStorage.latest).reverse()
    symbol[0].list = locSymb

    nextTick(() => {
      // 向电子病历页面插入的组件
      useInsertComponent(refInsertComponent.value as HTMLElement)
    })
  }
</script>

<style scoped lang="scss">
  :deep(.el-tab-pane) {
    width: 715px;
    min-height: 200px;
    .symbol {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      span {
        margin: 5px 0;
        width: 65px;
        text-align: center;
        border-radius: 2px;
        &:hover {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
</style>
